<template>
  <div class="ziliao">
    <!-- 头部导航栏 -->
    <head-component
      :rightClick="rightClick"
      :rightWords="rightWords"
      class="header_bottom"
      title="个人资料"/>
    <div class="ziliao_box">
      <!-- 头像部分 -->
      <div class="user_img_box">
        <div class="f32 col_99">头像</div>
        <div class="user_img_center">
          <label class="user_img_lable">
            <img :src="headImg" class="user_img" />
          </label>
        </div>
      </div>
      <!-- 信息列表 -->
      <div class="user_info_list">
        <div class="user_info_left f32 col_99">ID</div>
        <div class="user_info_right f32 col_33">{{id}}</div>
      </div>
      <div class="user_info_list">
        <div class="user_info_left f32 col_99">昵称</div>
        <div class="user_info_right user_info_right1">
          <span class="f32 col_33">{{name}}</span>
        </div>
      </div>
      <div class="user_info_list">
        <div class="user_info_left f32 col_99">手机号</div>
        <div class="user_info_right user_info_right1">
          <span class="f32 col_33">{{phone}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import headComponent from '@/components/layout/head';
export default {
  name: '',
  components: {
    headComponent
  },
  data() {
    return {
      rightWords: '修改',
      headImg: require('@/common/image/user_img.png'),
      id: '666666',
      name: '用户001',
      phone: '18888888888'
    }
  },
  watch: {},
  mounted() {
    this.getNews();
  },
  methods: {
    // 点击修改资料
    rightClick(){
      this.$router.push('/changeInfo')
    },
    getNews(){
      let $this = this;
      var t = this.$toast.loading({message:'正在加载数据',mask:true, duration:9999})
      let uid = localStorage.getItem('uid');
      let token = localStorage.getItem('token');
      var data = {u_id: uid,token:token};
      $this.$axios.post('/index.php?m=user&c=index',data).then((res) => {
        t.clear();
        if(res.data.code == 1){
          if(res.data.user.m_avatar != ''){ $this.headImg = res.data.user.m_avatar }
          $this.name = res.data.user.m_name;
          $this.id = res.data.user.id;
          $this.phone = res.data.user.m_phone;
        }else{
          $this.$toast({
            message: res.data.msg,
            duration: 800
          })
        }
      })
    },

  },
}
</script>
<style lang="less">
  .header_bottom{
    border-bottom: 1Px solid #f5f5f5;
  }
  .ziliao_box{
    padding: 0.4rem;
    margin-top: 1.4667rem;
    // 头像部分
    .user_img_box{
      height: 1.4667rem;
      display: flex;
      display:-webkit-flex;
      align-items: center;
      -webkit-align-items: center;
      justify-content: space-between;
      -webkit-justify-content: space-between;
      .user_img_center{
        flex: 1;
        -webkit-flex: 1;
        .user_img_lable{
          display: flex;
          display:-webkit-flex;
          align-items: center;
          -webkit-align-items: center;
          justify-content: flex-end;
          -webkit-justify-content: flex-end;
          .user_img_input{ width: 60%; opacity: 0; }
          .user_img{
            width: 0.9333rem;
            height: 0.9333rem;
            border-radius: 50%;
            -webkit-border-radius: 50%;
          }
        }
      }
      .user_img_right{ height: 0.4rem; margin-left: 0.4rem; }
    }
    // 信息列表
    .user_info_list{
      height: 1.333rem;
      display: flex;
      display:-webkit-flex;
      align-items: center;
      -webkit-align-items: center;
      justify-content: space-between;
      -webkit-justify-content: space-between;
      .user_info_right1{
        display: flex;
        display:-webkit-flex;
        align-items: center;
        -webkit-align-items: center;
        img{ height: 0.4rem; margin-left: 0.4rem; }
      }
    }
  }
</style>
